<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梗百科 - 热门梗列表</title>
    <link rel="stylesheet" href="styles/index.css">
    <style>
        /* 内联关键动画样式 */
        .shake {
            animation: shake 0.5s;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(-50%); }
            25% { transform: translateX(calc(-50% - 10px)); }
            75% { transform: translateX(calc(-50% + 10px)); }
        }
    </style>
</head>

<body>
    <header>
        <h1>梗百科</h1>
        <div class="search-container">
            <input type="text" id="search-input" placeholder="搜索热门梗">
            <button id="search-button">搜索</button>
            <button id="publish-button">发布新梗</button>
        </div>
    </header>

    <!-- 搜索提示 -->
    <div id="search-notification" class="notification hidden"></div>

    <main class="card-container">
        <!-- 动态生成卡片 -->
    </main>

    <script>
        // 获取热梗列表
        async function fetchMemes() {
            try {
                const response = await fetch('/memes');
                if (!response.ok) throw new Error('网络响应不正常');
                const memes = await response.json();
                renderMemes(memes);
            } catch (error) {
                console.error('获取热梗列表失败:', error);
            }
        }

        // 渲染卡片
        function renderMemes(memes) {
            const container = document.querySelector('.card-container');
            container.innerHTML = memes.map(meme => `
                <div class="card">
                    <a href="/meme/${meme.id}">
                        <h2>${meme.title}</h2>
                        <p>${meme.content}</p>
                    </a>
                </div>
            `).join('');
        }

        // 搜索处理
        async function handleSearch() {
            const keyword = document.getElementById('search-input').value.trim();
            if (!keyword) return;

            try {
                const response = await fetch(`/memes/search?keyword=${encodeURIComponent(keyword)}`);
                const data = await response.json();

                if (data.found) {
                    window.location.href = `/meme/${data.meme.id}`;
                } else {
                    showNotification('🔍 未找到相关梗内容', 'error');
                }
            } catch (error) {
                showNotification('⚠️ 搜索失败，请检查网络连接', 'error');
                console.error('搜索错误:', error);
            }
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            const noti = document.getElementById('search-notification');
            noti.textContent = message;
            noti.className = `notification ${type} ${type === 'error' ? 'shake' : ''}`;
            noti.classList.remove('hidden');

            setTimeout(() => noti.classList.add('hidden'), 3000);
        }

        // 事件监听
        window.addEventListener('load', fetchMemes);
        document.getElementById('publish-button').addEventListener('click', () => {
            window.location.href = 'publish';
        });
        document.getElementById('search-button').addEventListener('click', handleSearch);
        document.getElementById('search-input').addEventListener('keypress', e => {
            if (e.key === 'Enter') handleSearch();
        });
    </script>
</body>

</html>